<template>
    <div class="app-container" v-loading="fullscreenLoading">
        <div class="filter-container">
            <el-form :inline="true" class="demo-form-inline" label-position="left">
                <!-- <el-form-item label="月份" label-width="50px">
                    <el-date-picker v-model="search.month" type="month" placeholder="选择月" style="width: 140px;">
                    </el-date-picker>
                </el-form-item> -->
                <el-form-item label="执行人归属" label-width="90px">
                    <el-select v-model="search.subBelonging" filterable placeholder="执行人归属" remote style="width: 140px;"
                        :remote-method="remoteMethodOrg" :loading="loading">
                        <el-option v-for="item in orgList" :key="item.cityName" :label="item.cityName"
                            :value="item.cityName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="执行人" label-width="60px">
                    <el-select v-model="search.batchExecutor" filterable remote placeholder="请输入执行人" clearable
                        style="width: 140px;" :remote-method="remoteMethod" :loading="loading">
                        <el-option v-for="item in options" :key="item.userName"
                            :label="`${item.acName}(${item.cityName})`" :value="item.userName">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="目标状态" label-width="70px">
                    <el-select v-model="search.taskState" placeholder="请选择" style="width: 140px;" clearable>
                        <el-option v-for="item, i in typeOptions" :key="i" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="类型" label-width="50px">
                    <el-select v-model="search.taskType" placeholder="请选择" style="width: 140px;"
                        @change="changeTaskType">
                        <el-option v-for="item, i in okrType" :key="i" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="科室" label-width="45px" v-if="search.taskType === '20'">
                    <tree-select :data="treeSelectData" :defaultProps="treeDefaultProps" :nodeKey="treeNodeKey"
                        :width="180" :checkedKeys="treeDefaultCheckedKeys" :isAddState='isAddState'
                        @popoverHide="popoverHide"></tree-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="down">导出</el-button>
                </el-form-item>
            </el-form>
            <!-- <div class="show-btn" @click="showAllList">
                <i class="el-icon-arrow-up" v-if="showAll"></i>
                <i class="el-icon-arrow-down" v-if="!showAll"></i>
            </div> -->
        </div>
        <div class="anchor-box" v-if="isScroll && showAnchor" >
            <div class="anchor" v-for="itemCard, i in dataList" :key="i" @click="scrollToAnchor(i)">目标{{ i + 1 }}</div>
            <i class="el-icon-arrow-down" @click="showAnchor = false" />
        </div>
        <el-tooltip content="展开目标快捷定位锚点" placement="top" v-if="isScroll && !showAnchor">
            <div class="arrow-show" @click="showAnchor = true">
                <img src="@/assets/img/arrow.png" />
            </div>
        </el-tooltip>
        <div class="card-list" v-if="dataList.length" ref="cardList">
            <div v-for="itemCard, i in dataList" :key="i" class="card-right-list"
                :class="[showFull == itemCard.mainId && 'fixed-box', showFullItem == itemCard.mainId && 'fixed-box-item']">
                <div class="card-title" ref="cardTitle" :id="`anchor${i}`" :style="{background: itemCard.taskState == 1 ? '#edf2fa' : itemCard.taskState == 2 ? '#e0f5e8' : itemCard.taskState == 3 ? '#ffeded' : '#edf2fa'}">
                    <!-- <span class="show-btn" @click="showMainList(itemCard)">
                        <i class="el-icon-arrow-right" v-if="!itemCard.showMain"></i>
                        <i class="el-icon-arrow-down" v-if="itemCard.showMain"></i>
                    </span> -->
                    <span class="hover-go">目标{{ i + 1 }}：{{ itemCard.mainName || '--'
                    }}</span>
                    <span class="table-label" v-if="searchContent.taskType === '10'">承接专项：{{ itemCard.specializedName
                        || '--'
                        }}</span>
                    <span class="table-label" v-if="searchContent.taskType === '20'">科室：{{ itemCard.deptName || '--'
                        }}</span>
                    <span class="table-label">执行人：{{ itemCard.executorAcName || '--' }}</span>
                    <span class="table-label">时间进度：{{ itemCard.timeProgress ?
                        truncateToFixed(itemCard.timeProgress, 1) : 0 }}%
                    </span>
                    <img src="@/assets/img/full.png" class="full" @click="full(itemCard)"
                        v-if="!showFull && !showFullItem" />
                    <img src="@/assets/img/onFull.png" class="full" @click="onfull" v-if="showFull || showFullItem" />
                </div>
                <div class="table-content">
                    <div v-for="(item, idx) in itemCard.subTasks" :key="idx" class="content-box"
                        v-if="!fullId || fullId === item.subId">
                        <div class="content-title">
                            <span @click="showList(itemCard, item)" class="subName">
                                <span class="show-btn">
                                    <i class="el-icon-arrow-right" v-if="!item.show"></i>
                                    <i class="el-icon-arrow-down" v-if="item.show"></i>
                                </span>
                                <el-tag class="tag"
                                    :type="item.avgRating >= 0.7 ? 'success' : item.avgRating >= 0.3 ? 'warning' : 'danger'">
                                    {{ item.avgRating || 0
                                    }}分</el-tag>
                                <b>关键结果{{ idx + 1 }}：{{ item.subName }}</b>
                            </span>
                            <span class="team-person">负责团队: {{ item.subExecutorAcNames }}</span>
                            <!-- <img src="@/assets/img/full.png" class="full" @click="fullItem(itemCard, item)"
                                v-if="!item.showFull" />
                            <img src="@/assets/img/onFull.png" class="full" @click="onfullItem(item)"
                                v-if="item.showFull" /> -->
                        </div>
                        <el-table :data="item.batchSubTasks || []" style="width: 100%;" border class="table-box"
                            :height="item.height" :cell-style="tableCellClassName" v-if="item.show">
                            <el-table-column type="expand"
                                v-if="itemCard.taskType != '30' && itemCard.taskType != '60'">
                                <template slot-scope="props">
                                    <el-form label-position="top" inline class="table-expand">
                                        <el-form-item label="工作任务及落实情况" style="width: 100%;margin-bottom: 0;"
                                            label-width="145px">
                                            <div v-html="getTextToBr(props.row.implementDescription)"></div>
                                        </el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column label="序号" width="50">
                                <template slot-scope="scope">
                                    {{ scope.$index + 1 }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                :label="searchContent.taskType != '30' && searchContent.taskType != '60' ? `本月关键结果` : '指标名称'"
                                width="650">
                                <template slot-scope="scope">
                                    <span v-html="getTextToBr(scope.row.taskName)"></span>
                                </template>
                            </el-table-column>
                            <el-table-column label="达成情况"
                                v-if="searchContent.taskType != '30' && searchContent.taskType != '60'">
                                <template slot-scope="scope">
                                    <span v-html="getTextToBr(scope.row.taskDescription)"></span>
                                </template>
                            </el-table-column>
                            <el-table-column label="自评分" width="70"
                                v-if="searchContent.taskType != '30' && searchContent.taskType != '60'">
                                <template slot-scope="scope">
                                    {{ scope.row.selfRating || 0 }}
                                </template>
                            </el-table-column>
                            <el-table-column label="指标值" width="150"
                                v-if="searchContent.taskType == '30' || searchContent.taskType == '60'">
                                <template slot-scope="scope">
                                    {{ scope.row.indexValue }}
                                </template>
                            </el-table-column>
                            <el-table-column label="执行人" width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.batchExecutorAcName }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="!dataList.length" class="empty-box">
            <img src="../../assets/img/empty.png" width="180" />
            <div>{{ getIsSearch() ? '请输入搜索条件后查询' : '暂无数据' }}</div>
        </div>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import { getPersonList, getOrg, getOkrList } from '@/api/api'
import qs from 'querystring'
import treeSelect from '@/components/treeSelect'
let orgs = [...orgList]
let orgIndex = orgs.findIndex(item => item.label === '所有科室')
if (orgIndex > -1) {
    orgs.splice(orgIndex, 1)
}
let org = orgs
export default {
    name: 'workListNew',
    components: { Pagination, treeSelect },
    data() {
        return {
            isScroll: false,
            showFullItem: '',
            showFull: '',
            showItem: {},
            showAnchor: false,
            fullId: '',
            showAll: false,
            treeSelectData: orgTreeList,
            treeDefaultProps: {
                children: 'children',
                label: 'label'
            },
            treeNodeKey: 'value',
            treeDefaultCheckedKeys: [],
            isAddState: '1',
            ksList: org,
            okrType: [
                { label: '部门', value: '10' },
                { label: '科室', value: '20' },
                // { label: '政务外网调度', value: '30' },
                // { label: '政务云调度', value: '60' },
                // { label: '地市调度', value: '40' }
            ],
            fullscreenLoading: false,
            search: {
                subBelonging: localStorage.getItem('cityName'),
                taskType: '20'
            },
            dataList: [],
            typeOptions: [
                {
                    value: 0,
                    label: '待开始'
                },
                {
                    value: 1,
                    label: '进行中'
                },
                {
                    value: 2,
                    label: '已完成'
                },
                {
                    value: 3,
                    label: '已延期'
                },
                // {
                //     value: 4,
                //     label: '已终止'
                // }
            ],
            orgList: [],
            options: [],
            total: 6,
            pagination: {
                'pageNum': 1,
                'pageSize': 20
            },
            loading: false,
            searchContent: {},
            indexNum: [],
            scroll: 0
        }
    },
    // beforeRouteEnter(to, from, next) {
    //     next(vm => {
    //         setTimeout(() => {
    //             const scrollBar = document.getElementsByClassName('table-content')[0]
    //             scrollBar.scrollTop = vm.scroll
    //         }, 1000)
    //     })
    // },
    // beforeRouteLeave(to, from, next) {
    //     const scrollBar = document.getElementsByClassName('table-content')[0]
    //     this.scroll = scrollBar.scrollTop;
    //     next()
    // },
    mounted() {
        this.onSubmit();
    },
    methods: {
        // 监听是否有滚动条
        checkScrollbar() {
            const div = this.$refs.cardList;
            return div.scrollHeight > div.clientHeight;
        },
        // 锚点
        scrollToAnchor(i) {
            const anchor = document.getElementById(`anchor${i}`);
            anchor.scrollIntoView({ behavior: 'smooth' });
        },
        fullItem(itemCard, item) {
            console.log('cardList.scrollTop', this.$refs.cardList.scrollTop)
            this.scroll = this.$refs.cardList.scrollTop
            this.showFullItem = itemCard.mainId
            item.height = '880px'
            this.fullId = item.subId
            item.show = true
        },
        onfullItem(item) {
            this.showFullItem = ''
            this.fullId = ''
            item.height = 'auto'
            setTimeout(()=>{
                this.$refs.cardList.scrollTop = this.scroll
            }, 10)
        },
        full(item) {
            this.showFull = item.mainId
        },
        onfull() {
            this.showFull = ''
            if (this.showFullItem) {
                this.showItem.show = false
                this.onfullItem(this.showItem)
            }
        },
        tableCellClassName({ row, column, rowIndex, columnIndex }) {
            let rowStyle = {}
            if (columnIndex == 4) {
                rowStyle.background = row.selfRating >= 0.7 ? '#d5ffe9' : row.selfRating >= 0.3 ? '#fff4d9' : '#ffe2e2'
            } else {
                rowStyle.background = '#fff'
            }
            return rowStyle
        },
        showAllList() {
            this.showAll = !this.showAll
            if (this.showAll) {
                this.dataList.map(item => {
                    item.showMain = true
                    item.subTasks.map(val => {
                        val.show = true
                    })
                    return item
                }) || []
            } else {
                this.dataList.map(item => {
                    item.showMain = false
                    item.subTasks.map(val => {
                        val.show = false
                    })
                    return item
                }) || []
            }
        },
        showList(itemCard, item) {
            item.show = !item.show
            if (item.show) {
                this.showItem = item
                this.fullItem(itemCard, item)
            } else {
                this.showItem = {}
                this.onfullItem(item)
            }
        },
        showMainList(item) {
            item.showMain = !item.showMain
            if (item.showMain) {
                item.subTasks.map(val => {
                    val.show = true
                })
            } else {
                item.subTasks.map(val => {
                    val.show = false
                })
            }
        },
        getTextToBr(text) {
            return text ? text.replace(/\n/g, '<br />') : '--'
        },
        popoverHide(checkedIds, checkedData) {
            this.search = { ...this.search, deptName: checkedIds }
        },
        changeTaskType() {
            this.search = { ...this.search, deptName: '' }
        },
        goDetail(row) {
            this.$router.push({
                path: row.taskType != '30' && row.taskType != '60' ? `/work/detail/${row.mainId}` : `/cloudwork/cloudDetail/${row.mainId}`
            })
        },
        down() {
            let params = { ...this.search }
            window.open(`${process.env.NODE_ENV === 'development' ? '/dev-api' : ''}/api/tasks/export?${qs.stringify(params)}`)
        },
        getIsSearch() {
            return Object.keys(this.searchContent).length === 0
        },
        getStateName(state) {
            let find = this.typeOptions.find(item => item.value == state)
            return find?.label || state || ''
        },
        truncateToFixed(value, decimals) {
            const integerPart = Math.trunc(value || 0); // 获取整数部分
            const decimalPart = value - integerPart; // 获取小数部分
            const factor = Math.pow(10, decimals);
            const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
            return integerPart + truncatedDecimalPart; // 组合整数部分和小数部分
        },
        okrList() {
            let param = { ...this.search }
            if (!this.getIsSearch()) {
                this.fullscreenLoading = true
                getOkrList({ ...param }).then(res => {
                    let list = res.data.map(item => {
                        item.showMain = false
                        item.subTasks.map(val => {
                            val.show = false
                            val.height = 'auto'
                        })
                        return item
                    }) || []
                    let indexNum = []
                    list.map(item => {
                        indexNum.push([])
                    })
                    this.indexNum = [...indexNum]
                    this.dataList = list;
                    this.fullscreenLoading = false
                    setTimeout(() => {
                        this.isScroll = list.length ? this.checkScrollbar() : false
                    }, 200)
                }).catch((e) => {
                    this.fullscreenLoading = false
                })
            } else {
                this.$message({
                    type: 'warning',
                    message: '请输入搜索条件后查询!'
                })
            }
        },
        changeItem(i) {
            // this.tableHeight()
        },
        getColor(state) {
            let taskState = this.getStateName(state)
            const colors = {
                '超前': '#1ecd00',
                '正常': '#1ecd00',
                '已完成': '#1ecd00',
                '进行中': '#1890ff',
                '待开始': '#999',
                '已延期': '#ff4949',
                '落后': '#ff4949'
            }
            return colors[taskState]
        },
        reset() {
            this.search = {
                subBelonging: localStorage.getItem('cityName'),
                taskType: '20'
            }
            this.treeDefaultCheckedKeys = []
            this.orgList = []
            this.options = []
            this.onSubmit()
        },
        onSubmit() {
            this.searchContent = { ...this.search };
            this.okrList()
        },
        getPerson(acName) {
            this.loading = false;
            getPersonList({ acName }).then(res => {
                let personList = [];
                // if (this.search.subBelonging) {
                //     personList = res.filter(item => item.cityName == this.search.subBelonging) || []
                // } else {
                personList = res || []
                // }
                this.options = personList
            })
        },
        gerOrgList(cityName) {
            this.loading = false;
            getOrg({ cityName }).then(res => {
                this.orgList = res || []
            })
        },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                this.getPerson(query.toLowerCase())
            } else {
                this.options = [];
            }
        },
        remoteMethodOrg(query) {
            if (query !== '') {
                this.loading = true;
                this.gerOrgList(query.toLowerCase())
            } else {
                this.orgList = [];
            }
        },
        getPagination(pagination) {
            this.pagination = pagination
            this.getList()
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }, dataList, idx) {
            if (columnIndex <= 3) {
                const _row = this.flitterData(dataList, 'subName', idx).one[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col,
                }
            }
        },
        flitterData(arr, name, idx) {
            let spanOneArr = []
            let concatOne = 0
            let checknum = 0;
            this.indexNum[idx] = []
            arr.forEach((item, index) => {
                if (index === 0) {
                    spanOneArr.push(1)
                    this.indexNum[idx].push(checknum)
                } else {
                    if (item[name] === arr[index - 1][name]) {
                        //第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1
                        spanOneArr.push(0)
                    } else {
                        checknum += 1;
                        spanOneArr.push(1)
                        concatOne = index
                    }
                    this.indexNum[idx].push(checknum)
                }
            })
            return {
                one: spanOneArr,
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.app-container {
    height: calc(100vh - 84px);
    padding: 16px 0;
}

.table-box-y {
    height: calc(100% - 47px);
    overflow-y: auto;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.table-box-y::-webkit-scrollbar {
    width: 8px;
    height: 0px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
.table-box-y::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
.table-box-y::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
}

.filter-container {
    // padding: 0 16px 12px; 
    padding: 0 16px;
    position: relative;

    ::v-deep .el-form-item {
        margin-bottom: 12px;
    }

    .show-btn {
        position: absolute;
        top: 5px;
        right: 12px;
        cursor: pointer;

        &:hover {
            color: #1890ff;
        }
    }
}

.table-box {
    margin-top: 10px;

    ::v-deep .el-button--medium {
        padding: 0px 5px;
    }
}

.empty-box {
    text-align: center;
    color: #999;
    line-height: 40px;
    margin-top: 100px;

    img {
        margin-left: -12px;
    }
}

b {
    color: #333;
}


.card-list {
    border-top: 1px solid #dfe6ec;
    height: calc(100vh - 149px);
    overflow-y: auto;
    padding: 14px;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.card-list::-webkit-scrollbar {
    width: 8px;
    height: 0px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
.card-list::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
.card-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
}

.card-left-list {
    width: 280px;
    // height: 100vh;
    border-right: 1px solid #dfe6ec;
    height: calc(100vh - 149px);
    overflow-y: auto;
    padding-bottom: 40px;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.card-left-list::-webkit-scrollbar {
    width: 8px;
    height: 0px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
.card-left-list::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
.card-left-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
}

.item-card {
    border-bottom: 1px solid #dfe6ec;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 14px;

    .item-hidden {
        width: 100%;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    &:hover {
        background: #f3f6fb;
        color: #000;

        b {
            color: #000;
        }
    }

    .item-card-content {
        display: flex;
        margin-top: 8px;
        color: #666;
    }
}

.taskProgress-green {
    color: rgb(30, 205, 0);
}

.item-card-choice {
    background: #1890ff !important;
    color: #fff !important;

    b {
        color: #fff !important;
    }

    .item-card-content {
        color: #fff !important;
    }

    .taskProgress-green {
        color: #88ff9e;
    }
}

.card-right-list {
    width: 100%;
    margin-bottom: 14px;
    border-radius: 7px;
    overflow: hidden;
}

.card-title {
    background: #edf2fa;
    text-align: left;
    line-height: 24px;
    border-top: 1px solid #dfe6ec;
    padding: 10px 36px 10px 16px;
    background: #edf2fa;
    font-size: 14px;
    position: relative;

    .show-btn {
        margin-right: 5px;
        cursor: pointer;
        font-size: 18px;

        &:hover {
            color: #1890ff;
        }
    }

    .table-label {
        margin-right: 10px;
    }
}

.hover-go {
    font-size: 17px;
    font-weight: bold;
    // cursor: pointer;
    margin-right: 5px;

    // &:hover {
    //     color: rgb(24, 144, 255) !important;
    // }
}

.table-content {
    // height: calc(100vh - 234px);
    // overflow-y: auto;
    padding: 14px 16px 0;
    background: #f8f8f8;
    max-height: 800px;
    overflow-y: auto;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.table-content::-webkit-scrollbar {
    width: 8px;
    height: 0px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
.table-content::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
.table-content::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
}

.content-box {
    background: #fff !important;
    padding: 10px;
    margin-bottom: 14px;
    border-radius: 7px;
    box-shadow: 0 0 6px #e3e3e3;
    position: relative;

    ::v-deep .el-table {
        max-height: 550px;
    }

    .show-btn {
        cursor: pointer;
        margin-right: 5px;
        font-size: 18px;

        &:hover {
            color: #1890ff;
        }
    }
}

.content-title {
    line-height: 28px;
    background: #fff;
    width: calc(100% - 70px);
}

.subName {
    cursor: pointer;

    &:hover {

        b,
        .show-btn {
            color: #1890ff;
        }

    }
}

.content-value {
    display: flex;
    height: 18px;
    font-size: 14px;
    background: #fff;
    margin-bottom: 5px;

    div {
        margin-right: 16px;
    }
}

.bar-box {
    display: flex;
}

.bg {
    width: 200px;
    height: 10px;
    background: #d4dffe;
    border-radius: 10px;
    margin: 6px 12px 0;

    .bar {
        height: 10px;
        border-radius: 10px;
        background: linear-gradient(to right, #8ef5fb, #30b3ff);
    }

    .bar-green {
        height: 10px;
        border-radius: 10px;
        background: linear-gradient(to right, #7dedbb, #36a100);
    }
}

.team-person {
    max-width: 630px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 10px;
    font-size: 14px;
}

.taskProgress {
    margin-left: 16px;
}

.table-expand {
    ::v-deep .el-form-item--medium .el-form-item__label {
        line-height: 26px;
        color: #333;
    }

    ::v-deep .el-form-item__content {
        line-height: 26px;
    }
}

::v-deep .el-table {
    color: #333;
}

::v-deep .expanded {
    background: #f3f6fb;
}

::v-deep .el-table__expanded-cell {
    padding: 10px 16px;
}

::v-deep .el-form--label-top .el-form-item__label {
    padding-bottom: 0;
}

.tag {
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
    width: 55px;
    text-align: center;
    padding: 0;
    position: absolute;
    right: 0;
    top: 13px;
    height: 24px;
    line-height: 22px;
}

.tag-main {
    font-size: 14px;
    font-weight: bold;
    height: 24px;
    line-height: 22px;
    width: 55px;
    text-align: center;
    padding: 0;
}

.green {
    background: #88ff9e;
}

.fixed-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    z-index: 9999;
    border-radius: 0;

    .table-content {
        max-height: calc(100vh - 46px);
    }
}

.fixed-box-item {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    z-index: 9999;
    border-radius: 0;

    .table-content {
        max-height: calc(100vh - 46px);
    }

    ::v-deep .el-table {
        max-height: calc(100vh - 180px);
    }
}

.full {
    position: absolute;
    right: 10px;
    width: 14px;
    top: 16px;
    cursor: pointer;
}

.anchor-box {
    padding: 10px 0 16px;
    position: absolute;
    background: rgb(233 233 233 / 70%);
    right: 10px;
    bottom: 10px;
    z-index: 999;
    cursor: pointer;
    font-size: 14px;
    line-height: 26px;
    border-radius: 7px;
    text-align: center;
    text-align: center;
    box-shadow: 0 0 2px #ccc;
    width: 70px;
    max-height: calc(100% - 20px);
    overflow-y: auto;

    .anchor {
        &:hover {
            color: #1890ff;
        }
    }

    .el-icon-arrow-down {
        color: #666;
        font-size: 16px;
        position: absolute;
        bottom: 3px;
        left: calc(50% - 8px);
        cursor: pointer;

        &:hover {
            color: #1890ff;
        }
    }
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.anchor-box::-webkit-scrollbar {
    width: 4px;
    height: 0px;
    background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
.anchor-box::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
.anchor-box::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #ccc;
}
.arrow-show {
    position: absolute;
    background: rgb(191 203 217 / 60%);
    right: 15px;
    bottom: 10px;
    z-index: 999;
    cursor: pointer;
    font-size: 12px;
    line-height: 24px;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 0 2px #ccc;
    width: 50px;
    height: 50px;

    &:hover {
        color: #1890ff;
        background: rgba(209, 219, 231, 0.6);
    }

    img {
        width: 20px;
        margin-top: 15px;
    }
}

.blue-tag {
    font-size: 14px;
    border-color: #489fef;
    color: #0084ff;
    margin-top: 2px;
}

.el-tag.el-tag--warning {
    background-color: #fff8e6;
    border-color: #ffd668;
    color: #ffba00;
}

.el-tag.el-tag--danger {
    background-color: #ffeded;
    border-color: #ffa5a5;
    color: #ff4949;
}

.el-tag.el-tag--success {
    background-color: #e7faf0;
    border-color: #1fdd73;
    color: #13ce66;
}
</style>